<template>
  <div>
      <span>计步器</span>
      {{count}}
      {{newCount}}
      name.age: {{name.age}}
      newName.age: {{newName.age}}
      <button @click="handleClick">点击</button>

  </div>
</template>

<script>
import {ref, computed, watch, reactive, watchEffect, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted} from 'vue'

import {useRouter, useRoute} from 'vue-router'

export default {
    setup() {
        let count = ref(0);
        const name = reactive({age: 18})
        const newName = reactive({age: 15})
        const router = useRouter();
        const handleClick = () => {
            count.value += 1;
            name.age += 1;
            newName.age += 1;
            router.push('/');
        }

        onBeforeMount(() => {

        })
        onMounted(() => {

        })

        // const newCount = computed(() => {
        //     return count.value + 5
        // })
        
        const newCount = computed({
            get: () => {
                return count.value + 5
            },
            set: (value) => {
                count.value = value
            }
        })


        // watch(你要监听的属性， 属性发生变化的时候触发的函数, 是一个对象，这个对信息用于配置watch方法)
        watch([() => name.age, () => newName.age], ([newValue, newEndValue], [oldValue, oldEndVlaue]) => {
            console.log('newValue', newValue)
            console.log('newEndValue', newEndValue)
            console.log('oldValue', oldValue)
            console.log('oldEndVlaue', oldEndVlaue)
        }, {immediate: true})

        // watchEffect(() => {
        //     console.log(name.age)
        // })

        // get = 5 = newCount = 5;
        // set = 100 = newCount = 100
        setTimeout(() => {
            newCount.value = 555;
        }, 2000)

        return {
            count,
            newCount,
            name,
            newName,
            handleClick
        }
    }
}
</script>

<style>

</style>